<template>
    <div class="outmain ba_f">
        <div class="shuju_title mar_b20">
            <div class="shuju_title_text">
                <span>公告管理</span>
            </div>
        </div>
        <div class="flex-bet">
            <el-button type="primary" size="medium" @click="handleEdit" class="mar_t20">新增公告</el-button>
            <el-form :inline="true" :model="formInline" class="demo-form-inline searchform">
                <div class="mar_t20">
                    <el-form-item label="公告类型" class="mar_l20">
                        <el-select v-model="formInline.noticeType" placeholder="请选择">
                            <el-option
                                    v-for="item in ggOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSearch" size="medium">搜索</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <div class="tabledata mar_t20">
            <el-table
                    v-loading="listLoading"
                    :element-loading-text="elementLoadingText"
                    :data="list"
                    stripe
                    style="width: 100%"
                    @selection-change="setSelectRows">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="sort"
                        label="排序"
                >
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="公告标题"
                >
                </el-table-column>
                <el-table-column
                        prop="createdAt"
                        label="发布时间"
                >
                </el-table-column>
                <el-table-column
                        prop="noticeType"
                        label="公告类型"
                >
                    <template slot-scope="scope">
                        <div class="flex">
                            <div v-if="scope.row.noticeType=='1'">前台公告</div>
                            <div v-if="scope.row.noticeType=='2'">后台公告</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="display"
                        label="显示状态"
                >
                    <template slot-scope="scope">
                        <div class="">
                            <el-switch v-model="scope.row.display" active-value="1" inactive-value="2"
                                       @change="changeSwitch(scope.row)"></el-switch>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                >
                    <template slot-scope="scope">
                        <div class="flex">
                            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="page.total"
                    :page-size="page.pagesize"
                    :current-page.sync='page.currentPage'
                    @current-change="handleCurrentChange">
            </el-pagination>
            <edit ref="edit" @fetchData="fetchData"></edit>
        </div>

    </div>
</template>
<script>
    import Edit from "./components/noticesetedit";
    import {getNoticeList, changeNotice, noticeDel} from "@/api/setup";

    export default {
        components: {Edit},
        created() {
            this.fetchData();
        },
        data() {
            return {
                formInline: {
                    noticeType: '',
                },
                ggOptions: [
                    {
                        value: '1',
                        label: '前台公告',
                    },
                    {
                        value: '2',
                        label: '后台公告',
                    },
                ],
                list: [],
                listLoading: true,
                selectRows: "",
                elementLoadingText: "正在加载...",
                page: {
                    total: 0,
                    size: 10,
                    currentPage: 1,
                },
            }
        },
        methods: {
            async fetchData() {
                var params = {
                    page: this.page.currentPage,
                    noticeType: this.formInline.noticeType,
                }
                const {data, count} = await getNoticeList(params);
                this.list = data;
                this.page.total = count;
                this.listLoading = false;
            },
            onSearch() {
                this.fetchData();
            },
            handleEdit(row) {
                console.log(this.$refs["edit"])
                if (row.id) {
                    this.$refs["edit"].showEdit(row);
                } else {
                    this.$refs["edit"].showEdit();
                }
            },
            setSelectRows(val) {
                this.selectRows = val;
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.fetchData();
            },
            async changeSwitch(row) {
                const {msg} = await changeNotice({id: row.id, display: row.display});
                this.$baseMessage(msg, "success");
                this.fetchData();
            },
            handleDelete(row) {
                if (row.id) {
                    this.$baseConfirm("你确定要删除当前项吗", null, async () => {
                        const {msg} = await noticeDel({id: row.id});
                        this.$baseMessage(msg, "success");
                        this.fetchData();
                    });
                } else {
                    if (this.selectRows.length > 0) {
                        const id = this.selectRows.map((item) => item.id);
                        this.$baseConfirm("你确定要删除选中项吗", null, async () => {
                            const {msg} = await noticeDel({id});
                            this.$baseMessage(msg, "success");
                            this.fetchData();
                        });
                    } else {
                        this.$baseMessage("未选中任何行", "error");
                        return false;
                    }
                }
            },
        }
    }
</script>
